'use strict'
// 初始化
$(function () {
    $.get('http://localhost:8080/user', function (res) {
        var $tr = $("[id = userdata]")
        res.forEach(item => {
            $tr.append(`
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>
                        <input type="button" value="详情" onclick="detail(${item.id})">
                        <input type="button" value="删除" onclick="Delete(${item.id})">
                    </td>
                </tr>
            `);
        });
    })
})

// 跳转增加页面
function Add() {
    window.location.href = './detail.html'
}

// 跳转更新页面
function detail(id) {
    window.location.href = `./detail.html?id=${id}`
}

// 模糊查询
function Select() {
    $.get('http://localhost:8080/user', function (res) {
        var $tr = $("[id = userdata]")
        let strArr = $('[id = text]').val().split('');
        let Arr = [];
        // 判断是否输入关键字，如果没有输入，就输出所有数据
        if (strArr.length > 0) {
            $tr.html(``);
            $tr.append(`
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>操作</td>
            </tr>
            `)
            // 循环次数为所有数据的个数
            for (let i = 0; i < res.length; i++) {
                // 循环次数为输入框输入的字符串长度
                for (let j = 0; j < strArr.length; j++) {
                    // 循环次数为数据里的字符串长度
                    for (let k = 0; k < res[i].name.split('').length; k++) {
                        // 判断与输入框内字符串重复的数据
                        if (strArr[j] === res[i].name.split('')[k]) {
                            // 去重
                            if (Arr.indexOf(res[i].id) < 0) {
                                Arr.push(res[i].id)
                                $tr.append(`
                                <tr>
                                    <td>${res[i].id}</td>
                                    <td>${res[i].name}</td>
                                    <td>
                                        <input type="button" value="详情" onclick="detail(${res[i].id})">
                                        <input type="button" value="删除" onclick="Delete(${res[i].id})">
                                    </td>
                                    
                                </tr>
                                `);
                            }
                        }
                    }
                }
            }
        } else {
            $tr.html(``);
            $tr.append(`
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>操作</td>
            </tr>
            `)
            res.forEach(item => {
                $tr.append(`
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>
                        <input type="button" value="详情" onclick="detail(${item.id})">
                        <input type="button" value="删除" onclick="Delete(${item.id})">
                    </td>
                </tr>
            `);
            });
        }
    })
}

// 删除
function Delete(id) {
    var $tr = $("[id = userdata]")
    let obj = {
        id: id,
        name: '',
        pwd: ''
    }
    if (confirm('是否删除？')) {
        alert('删除成功！')
        $.ajax({
            url: `http://localhost:8080/user/${id}`,
            type: "DELETE",
            contentType: "application/json",
            data: JSON.stringify(obj),
            dataType: "json",
            success: function (res) {
                $tr.html('')
                $tr.append(`
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>操作</td>
                </tr>
                `)
                res.forEach(item => {
                    $tr.append(`
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>
                            <input type="button" value="详情" onclick="detail(${item.id})">
                            <input type="button" value="删除" onclick="Delete(${item.id})">
                        </td>
                    </tr>
                `);
                });
            },
        });
    }
}



